<template>
  <!-- eslint-disable-next-line vue/require-v-for-key -->
  <li v-for="item in treeNode" :key="item.key">
    <span v-if="item.children" class="button switch" :class="isOpen(item)" @click="toggleShow(item)"></span>
    <span v-else class="button switch"></span>
    <span>{{ item.title }}</span>
    <ul v-if="item.children && item.isShow">
      <tree-core :tree-node="item.children" />
    </ul>
  </li>
</template>
<script lang="ts">

import { defineComponent, toRefs } from "vue";
type TreeNode = {
  title: string,
  key: string,
  children: TreeNode[] | unknown[],
  isShow: boolean
}
export default defineComponent({
  name: 'tree-core',
  props: ['treeNode'],
  setup(props) {

    function isOpen(treeNode: TreeNode) {
      return !treeNode.isShow || !treeNode.children ? 'roots_close' : 'roots_open'
    }

    function toggleShow(treeNode: TreeNode) {
      if (!treeNode.children || treeNode.children.length <= 0) return
      return treeNode.isShow = !treeNode.isShow
    }

    return { ...toRefs(props), isOpen, toggleShow }
  },

})
</script>
<style scoped>
@import "../../static/css/v-tree.css";
</style>
